<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示异步请求</title>
</head>
<body>
<h1>测试Axios发出异步请求</h1>
<input type="button" value="发出请求" onclick="fn()">
<h1>测试post异步请求</h1>
<input type="button" value="post请求" onclick="postfn()">

<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>-->

<script>

    function postfn(){
        //post异步请求，需要通过FormData对象传参
        let data = new FormData();
        //通过FormData对象的append方法将数据放在FormData对象中
        data.append("info","aobing");
        //发出post异步请求时，把Formdata对象在路径后
        axios.post("/helloAxios",data).then(function (response) {
            alert(response.data);
        })
    }
    function fn(){
       //发出异步get请求  get("/helloAxios"):定义请求方式和请求地址
        //.then(function (response):当正常响应后，执行then里面的函数，response指响应对象
       /* axios.get("/helloAxios").then(function (response) {
            //请求成功后执行的代码， response.data代表响应的数据
            alert(response.data)
        }).catch(function (err) {
            //请求失败时执行的代码，err代表错误多谢
            alert(err);
        })*/
        //如果请求出错时不需要做任何事情，可以省略掉后面的catch部分，
        //不写catch时，如果出错，则需要在浏览器控制台上查看错误
        axios.get("/helloAxios?info=neza").then(function (response) {
            //请求成功后执行的代码， response代表请求对象，response.data代表响应的数据
            alert(response.data);
        })
    }
</script>

</body>
</html>